<script setup lang="ts">
import {
  Edit, TrendCharts, Coin, Notebook, Iphone, View, Camera,
} from '@element-plus/icons-vue';
import {
  reactive, ref, computed, nextTick,
} from 'vue';
import Menu from './components/menu.vue';
import Chart from './components/chart.vue';
import Mobile from './components/mobile.vue';
import { useRoute, useRouter } from 'vue-router';
import * as productAPI from '@/api/product';
import { updataProductList } from '@/store/product';
import { assetChart } from '@/store/modules/asset-chart';
import { screenData } from '@/store/modules/screenData';
import SetPage from './components/set-page.vue';
import SetGraph from './components/set-graph.vue';
import { cloneDeep } from 'lodash-es';
import html2canvas from 'html2canvas';

const route = useRoute();
const router = useRouter();
const product = updataProductList();

const asset = assetChart();
const screenDataList = screenData();
const id = computed(() => route.params.id);
const setPage = ref<boolean>(true);
const widthNum = ref<number>(600);
const heightNum = ref<number>(400);
const color = ref<string>('#0e2a43');

product.updataComponentsList(+id.value, 1);
let idIndex = 0;
let idIndex1 = 0;
let zIndex = 0;
// 页面初始化数据
(async function update() {
  await product.updataComponentsList(+id.value, 1);
  const length = JSON.parse(product.componentsList[0]?.componentList)[0]?.length;
  const tmpArr1 = JSON.parse(product.componentsList[0]?.componentList)[0]
    ?.reverse()
    ?.map((item: any, i: number) => ({
      ...item,
      id: i,
      zIndex: i + 1,
    }))
    ?.sort((a: any, b: any) => b.zIndex - a.zIndex);
  const tmpArr2 = JSON.parse(product.componentsList[0]?.componentList)[1]
    ?.map((item: any, i: number) => ({
      ...item,
      id: i,
      zIndex: i,
    }));
  if (!tmpArr1) {
    return;
  }
  screenDataList.undateAddLayerList1(tmpArr1);
  screenDataList.undateAddComponentList1(tmpArr2);
  screenDataList.undateAddRecordList(cloneDeep([tmpArr2, tmpArr1]));
  idIndex = length;
  idIndex1 = length;
  zIndex = length;
}());

const layerRef = ref();
const assetRef = ref();

// 按钮style
const btnItem = reactive({
  edit: true,
  trendCharts: true,
  coin: true,
  notebook: true,
  iphone: false,
});
  // 图层高亮index
const activeindex = ref(-1);
const menuPosition: [number, number] = reactive([-200, -200]);
function documentClick() {
  // activeindex.value = -1;
  menuPosition[0] = -500;
  menuPosition[1] = -500;
}
// 浏览器点击事件
document.addEventListener('click', documentClick);

// 去掉浏览器右键点击默认事件
function rightClick(e: MouseEvent) {
  e.preventDefault();
  menuPosition[0] = -500;
  menuPosition[1] = -500;
}
document.addEventListener('contextmenu', rightClick);

// 编辑按钮
function ultraEdit() {
  btnItem.edit = !btnItem.edit;
}
// 图层按钮
function trendCharts() {
  btnItem.trendCharts = !btnItem.trendCharts;
}
// 资产按钮
function coin() {
  btnItem.coin = !btnItem.coin;
}
// 右侧按钮
function notebook() {
  btnItem.notebook = !btnItem.notebook;
}
// 移动端按钮
function iphone() {
  btnItem.iphone = !btnItem.iphone;
  if (btnItem.iphone) {
    btnItem.coin = false;
    btnItem.notebook = false;
    btnItem.trendCharts = false;
  } else {
    btnItem.coin = true;
    btnItem.notebook = true;
    btnItem.trendCharts = true;
  }
}
// 选择图层样式
const layerStyle = ref(true);
function selectLayerStyle() {
  layerStyle.value = !layerStyle.value;
}
// 上移一层
function upTier() {
  screenDataList.updateLayerList(activeindex.value, 1);
}
// 下移一层
function downTier() {
  screenDataList.updateLayerList(activeindex.value, 2);
}
// 置顶
function goTop() {
  screenDataList.updateLayerList(activeindex.value, 3);
}
// 置低
function goFooter() {
  screenDataList.updateLayerList(activeindex.value, 4);
}
// 预览
// 保存
function ctrlS(e: KeyboardEvent) {
  if (e.key === 's' && e.ctrlKey) {
    e.preventDefault();
    onSave();
  }
  if (e.key === 'z' && e.ctrlKey) {
    e.preventDefault();
    withdraw();
  }
  if (e.key === 'y' && e.ctrlKey) {
    e.preventDefault();
    ctrlY();
  }
}
document.addEventListener('keydown', ctrlS);
function onSave() {
  const params = {
    productName: product.componentsList[0]?.productName,
    // roleId: id.value,
    status: 0,
    componentList: [screenDataList.layerList
      .map((f) => ({
        zIndex: f.zIndex,
        componentName: f.componentName,
        id: f.id,
        url: f.url,
        name: f.name,
      })), screenDataList.componentList],
  };
  productAPI.undateSave(+id.value, params);
}
// 跳转到预览页
function goPreview() {
  html2canvas((document.querySelector('.canvas') as HTMLElement)).then((canvas) => {
    // canvas.width = 1920;
    // canvas.height = 1080;
    document.querySelector('#app')?.appendChild(canvas);
    router.push({
      name: 'preview',
      query: {
        id: id.value,
        canvas: JSON.stringify(canvas),
      },
    });
  });
}
// 选择图层
function selectLayer(id: number) {
  activeindex.value = id;
  const item = screenDataList.componentList.find((f) => f.id === id);
  onFocus(item, id);
  menuPosition[0] = -500;
  menuPosition[1] = -500;
}
// 画布菜单
const removeChartIndex = ref(-1);
function canvasMenu(e: MouseEvent, id: number) {
  removeChartIndex.value = id;
  e.preventDefault();
  activeindex.value = id;
  menuPosition[0] = e.clientX;
  menuPosition[1] = e.clientY;
}

// 资产
// 分析
const activeName = ref('图表');
function analyse(e: any) {
  activeName.value = e;
}
// 图表
function chart(e: any) {
  activeName.value = e;
}
// 地图
function assetMap(e: any) {
  activeName.value = e;
}
// 信息
function assetInfo(e: any) {
  activeName.value = e;
}
let componentName = '';
async function addComponent(name: any, i: number) {
  if (i) {
    componentName = name;
    return;
  }
  const tmpObj = {
    name: componentName,
    selected: true,
    id: idIndex1++,
    zIndex: zIndex++,
    x: 150,
    y: 100,
    rotate: 0,
    opacity: 1,
    ...asset.chartList.find((item) => item.componentName === componentName)?.default,
  };
  screenDataList.componentList?.map((d) => d.selected = false);
  screenDataList.undateAddComponentList(tmpObj);
  const listItem = asset.chartList
    .filter((d) => componentName === d.componentName)
    .map((f) => ({ ...f, id: idIndex++, zIndex }));
  screenDataList.undateAddLayerList(...listItem);
  await nextTick();
  // const item = document.querySelectorAll('.chart-item')[screenDataList.componentList.length - 1] as HTMLElement;
  // item.style.transform = 'translate(-50%, -60%)';
  // item.style.top = '50%';
  // item.style.left = '50%';
  cloneData();
  activeindex.value = !screenDataList.componentList.some((f) => f.selected) ? -1 : screenDataList.componentList.find((f) => f.selected).id;
}

const w = ref(0);
const h = ref(0);
const top = ref(0);
const left = ref(0);
let frame = reactive({
  clientX: 0,
  clientY: 0,
  x: 0,
  y: 0,
  w: 0,
  h: 0,
});
  // 是否正在框选
const isFraming = ref(false);
// 是否可以多选
const multiable = ref(false);

const verticalStandardLineVisible = ref(false);
const isVerticalStandardLineCorrect = ref(false);
const verticalStandardLineX = ref(0);
function resize(newRect: any) {
  w.value = newRect.width;
  h.value = newRect.height;
  top.value = newRect.top;
  left.value = newRect.left;
}
function onresizestop(item: any) {
  item.w = w.value;
  item.h = h.value;
}

function onPanelMouseDown(e: MouseEvent) {
  frame.x = e.offsetX;
  frame.y = e.offsetY;
  frame.w = 0;
  frame.h = 0;
  frame.clientX = e.clientX;
  frame.clientY = e.clientY;
  isFraming.value = true;
  screenDataList.componentList.forEach((item) => {
    item.selected = false;
  });
}

function onPanelMouseMove(e: MouseEvent) {
  if (!isFraming.value) {
    return;
  }
  if (multiable.value) {
    return;
  }
  if (e.clientX !== frame.clientX + frame.w) {
    return;
  }
  frame.w = e.clientX - frame.clientX;
  frame.h = e.clientY - frame.clientY;
  screenDataList.componentList
    ?.map((item) => {
      item.selected = false;
      return item;
    })
    ?.forEach((item) => {
      item.selected = true;
    });
}

// 键盘事件
function backspaceKeyboard(e: KeyboardEvent) {
  switch (e.key) {
  case 'Backspace':
    cloneData();
    screenDataList.componentList.find((f) => f.id === keyboardremoveID).x = 50000;
    screenDataList.undateRemoveLayerList(keyboardremoveID);
    setPage.value = true;
    cloneData();

    break;
  case 'ArrowUp':
    keyboardreCurrentItem.y--;
    cloneData();
    break;
  case 'ArrowDown':
    keyboardreCurrentItem.y++;
    cloneData();
    break;
  case 'ArrowLeft':
    keyboardreCurrentItem.x--;
    cloneData();
    break;
  case 'ArrowRight':
    keyboardreCurrentItem.x++;
    cloneData();
    break;
  default:
    break;
  }
}
let keyboardremoveID = 0;
let keyboardreCurrentItem = {};
function onFocus(currentItem: any, id: number) {
  setPage.value = false;
  keyboardreCurrentItem = currentItem;
  keyboardremoveID = id;
  document.addEventListener('keydown', backspaceKeyboard);
  if (multiable.value) {
    currentItem.selected = true;
  } else {
    screenDataList.componentList = screenDataList.componentList.map((item) => {
      item.selected = item.id === currentItem.id;
      return item;
    });
  }
  activeindex.value = screenDataList.componentList.find((f) => f.selected).id;
}
// 框选结束
function onPanelMouseUp() {
  activeindex.value = !screenDataList.componentList.some((f) => f.selected) ? -1 : screenDataList.componentList.find((f) => f.selected).id;
  const innerList = screenDataList.componentList.filter((d) => d.selected);
  if (innerList.length < 2) {
    isFraming.value = false;
    frame = {
      x: 0,
      y: 0,
      w: 0,
      h: 0,
    };
  } else {
    isFraming.value = true;
    const xMin = Math.min(...innerList.map((d) => d.x));
    const yMin = Math.min(...innerList.map((d) => d.y));
    frame = {
      x: xMin,
      y: yMin,
      w: Math.max(...innerList.map((d) => d.x + d.w)) - xMin,
      h: Math.max(...innerList.map((d) => d.y + d.h)) - yMin,
    };
  }
}
// 拖拽放置
function onDrop(e: DragEvent, index: number) {
  const tmpObj = {
    name: componentName,
    selected: true,
    id: idIndex1++,
    x: e.clientX - layerRef.value.offsetWidth - assetRef.value.offsetWidth - 150,
    y: e.clientY - 150,
    rotate: 0,
    opacity: 1,
    ...asset.chartList.find((item) => item.componentName === componentName)?.default,
  };
  screenDataList.componentList?.map((f) => f.selected = false);
  screenDataList.undateAddComponentList(tmpObj);
  //   // 右侧图层
  const listItem = asset.chartList
    .filter((d) => componentName === d.componentName)
    .map((f) => ({ ...f, id: idIndex++, zIndex }));
  screenDataList.undateAddLayerList(...listItem);
  cloneData();
  onFocus(tmpObj);
}

// 当拖拽时，显示对齐线
function onWidgetDrag(info: any, id: number, item: any) {
  // 1. 拿当前的x
  const {
    left: x,
    // top: y,
    width: w,
  } = info;
  item.x = x;
  item.y = info.top;
  const x0 = x + w / 2;
  // 2. 拿当前的x和数组中的别人挨个比
  let flag = false;
  let correct = false;
  for (const widget of screenDataList.componentList) {
    if (widget.id === id) {
      continue;
    }
    const x00 = widget.x + widget.w / 2;
    if (Math.abs(x0 - x00) < 10) {
      flag = true;
      if (x0 - x00 === 0) {
        correct = true;
      }
      break;
    }
  }
  verticalStandardLineVisible.value = flag;
  isVerticalStandardLineCorrect.value = correct;
  verticalStandardLineX.value = x0;
}

function cloneData() {
  screenDataList.undateAddRecordList([cloneDeep(screenDataList.componentList), cloneDeep(screenDataList.layerList)]);
}
// 撤回
function withdraw() {
  if (screenDataList.recordList.length === 1) {
    console.log('撤回到底了');
    return;
  }
  screenDataList.undateAddComponentList1(screenDataList.recordList[screenDataList.recordList.length - 2][0]);
  screenDataList.undateAddLayerList1(screenDataList.recordList[screenDataList.recordList.length - 2][1]);
  screenDataList.undateRemoveRecordList();
}
// 反撤回;
function ctrlY() {
  if (screenDataList.recordList4ctrlY.length === 0) {
    console.log('反撤回到底了');
    return;
  }
  screenDataList.undateAddComponentList1(screenDataList.recordList4ctrlY[screenDataList.recordList4ctrlY.length - 1][0]);
  screenDataList.undateAddLayerList1(screenDataList.recordList4ctrlY[screenDataList.recordList4ctrlY.length - 1][1]);
  screenDataList.undateRemoveRecordList4ctrlY();
}

function onPanelClick() {
  setPage.value = true;
}

interface Iparams {
  width: number;
  height: number;
  color: string;
}
function onPageSelect(params: Iparams) {
  widthNum.value = params.width;
  heightNum.value = params.height;
  color.value = params.color;
}
</script>

<template>
  <!-- 头部 -->
  <div class="header">
    <el-tooltip
      class="box-item"
      effect="dark"
      content="编辑"
      placement="bottom"
    >
      <el-button
        :icon="Edit"
        size="small"
        :type="btnItem.edit ? 'primary' : ''"
        @click="ultraEdit"
      />
    </el-tooltip>
    <el-tooltip
      class="box-item"
      effect="dark"
      content="图层"
      placement="bottom"
    >
      <el-button
        :icon="TrendCharts"
        size="small"
        :type="btnItem.trendCharts ? 'primary' : ''"
        @click="trendCharts"
      />
    </el-tooltip>
    <el-tooltip
      class="box-item"
      effect="dark"
      content="资产列表"
      placement="bottom"
    >
      <el-button
        :type="btnItem.coin ? 'primary' : ''"
        :icon="Coin"
        size="small"
        @click="coin"
      />
    </el-tooltip>
    <el-tooltip
      class="box-item"
      effect="dark"
      content="右侧面板"
      placement="bottom"
    >
      <el-button
        :type="btnItem.notebook ? 'primary' : ''"
        :icon="Notebook"
        size="small"
        @click="notebook"
      />
    </el-tooltip>
    <el-tooltip
      class="box-item"
      effect="dark"
      content="迁移至移动端"
      placement="bottom"
    >
      <el-button
        :type="btnItem.iphone ? 'primary' : ''"
        :icon="Iphone"
        size="small"
        @click="iphone"
      />
    </el-tooltip>
    <el-tooltip
      class="box-item"
      effect="dark"
      content="快照"
      placement="bottom"
    >
      <el-button
        :icon="Camera"
        size="small"
        @click="onSave"
      />
    </el-tooltip>
    <el-tooltip
      class="box-item"
      effect="dark"
      content="预览"
      placement="bottom"
    >
      <el-button
        :icon="View"
        size="small"
        @click="goPreview"
      />
    </el-tooltip>
    <div class="title">{{ '标题' }}</div>
  </div>

  <main>
    <!-- 移动端显示 -->
    <mobile
      :btn-item="btnItem.iphone"
    />
    <div
      class="layer"
      :class="{layer1: !btnItem.trendCharts}"
      ref="layerRef"
    >
      <!-- 头部 -->
      <div class="layer-header">
        <span>图层</span>
        <span>
          <el-tooltip
            effect="dark"
            content="收缩图"
            placement="bottom"
          >
            <i @click.stop="selectLayerStyle">
              <el-icon :color="layerStyle ? '#2681ff' : ''"><Grid /></el-icon>
            </i>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="文字版"
            placement="bottom"
          >
            <i @click.stop="selectLayerStyle">
              <el-icon :color="!layerStyle ? '#2681ff' : ''"><Film /></el-icon>
            </i>
          </el-tooltip>
          <i @click="trendCharts">
            <el-icon><ArrowLeft /></el-icon>
          </i>
        </span>
      </div>

      <!-- 操作 -->
      <div class="operation">
        <el-tooltip
          effect="dark"
          content="上移一层"
          placement="bottom"
        >
          <i
            :class="{active2: activeindex !== -1}"
            @click="upTier"
          >
            <el-icon><Top /></el-icon>
          </i>
        </el-tooltip>
        <el-tooltip
          effect="dark"
          content="下移一层"
          placement="bottom"
        >
          <i
            :class="{active2: activeindex !== -1}"
            @click="downTier"
          ><el-icon><Bottom /></el-icon></i>
        </el-tooltip>
        <el-tooltip
          effect="dark"
          content="置顶"
          placement="bottom"
        >
          <i
            :class="{active2: activeindex !== -1}"
            @click="goTop"
          ><el-icon><Upload /></el-icon></i>
        </el-tooltip>
        <el-tooltip
          class="box-item"
          effect="dark"
          content="置底"
          placement="bottom"
        >
          <i
            :class="{active2: activeindex !== -1}"
            @click="goFooter"
          >
            <el-icon><Download /></el-icon>
          </i>
        </el-tooltip>
      </div>

      <!-- 图层列表 -->
      <div class="layer-list">
        <div
          v-for="item in screenDataList.layerList?.sort((a, b) => b.zIndex - a.zIndex)"
          :key="item.id"
          class="layer-list-item"
          :class="{ active: item.id === activeindex }"
          @click.stop="selectLayer(item.id)"
          @contextmenu.stop="canvasMenu($event, item.id)"
        >
          <div
            class="img-container"
            v-if="layerStyle"
          >
            <img :src="item?.url">
          </div>
          <div
            v-if="layerStyle"
            class="desc-title hide-text"
          >
            {{ item?.name + item?.id }}
          </div>
          <div
            class="layerStyle"
            v-if="!layerStyle"
          >
            <i><el-icon><Bottom /></el-icon></i>
            <span
              v-if="!layerStyle"
              class="hide-text"
            >{{ '流程图' }}sadsadadDASSAAS</span>
          </div>
        </div>
      </div>
      <!-- 底部操作 -->
      <div class="filter-operation">
        <span :class="{ active3: activeindex !== -1 }">
          <el-icon :color="activeindex !== -1 ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, .2)'"><FolderOpened /></el-icon>
        </span>
        <span :class="{ active3: activeindex !== -1 }">
          <el-icon :color="activeindex !== -1 ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, .2)'"><Delete /></el-icon>
        </span>
        <span :class="{ active3: activeindex !== -1 }">
          <el-icon :color="activeindex !== -1 ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, .2)'"><Lock /></el-icon>
        </span>
        <span :class="{ active3: activeindex !== -1 }">
          <el-icon :color="activeindex !== -1 ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, .2)'"><View /></el-icon>
        </span>
      </div>
    </div>
    <div
      class="asset"
      :class="{asset1: !btnItem.coin}"
      ref="assetRef"
    >
      <!-- 头部 -->
      <div class="asset-header">
        <span>全部资产</span>
        <span @click="coin"><el-icon><ArrowLeft /></el-icon></span>
      </div>
      <div class="asset-main">
        <div class="asset-left">
          <div
            class="asset-left-item"
            @click.stop="analyse('分析')"
            :class="{active4: activeName === '分析'}"
          >
            <span class="bi">BI</span>
            <span>分析</span>
          </div>
          <div
            class="asset-left-item"
            :class="{active4: activeName === '图表'}"
            @click.stop="chart('图表')"
          >
            <span><el-icon><Histogram /></el-icon></span>
            <span>图表</span>
          </div>
          <div
            class="asset-left-item"
            :class="{active4: activeName === '地图'}"
            @click.stop="assetMap('地图')"
          >
            <span><el-icon><MapLocation /></el-icon></span>
            <span>地图</span>
          </div>
          <div
            class="asset-left-item"
            :class="{active4: activeName === '信息'}"
            @click="assetInfo('信息')"
          >
            <span><el-icon><Collection /></el-icon></span>
            <span>信息</span>
          </div>
        </div>
        <div class="asset-center">
          <Chart @change="addComponent" />
        </div>
      </div>
    </div>
    <div
      class="canvas"
      @drop="onDrop"
      @dragover="e => e.preventDefault()"
      @mousedown="onPanelMouseDown"
      @mousemove="onPanelMouseMove"
      @mouseup="onPanelMouseUp"
    >
      <div
        class="ruler-container"
        @dragover="e => e.preventDefault()"
      >
        <ruler />
      </div>
      <div
        class="canvas-container"
        :style="{
          width: `${widthNum}px`,
          height: `${heightNum}px`,
          backgroundColor: color,
        }"
        @dragover="e => e.preventDefault()"
        @click="onPanelClick"
      >
      </div>
      <dragger
        v-for="item in screenDataList.componentList"
        :key="item.id"
        :isActive="item.selected"
        class="chart-item"
        :style="{
          transform: `rotate(${item.rotate}deg)`,
          opacity: `${item.opacity}`,
        }"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        @resizing="resize"
        @resizestop="onresizestop(item)"
        @dragging="(info) => onWidgetDrag(info, item.id, item)"
        @clicked="onFocus(item, item.id)"
        @dragover="e => e.preventDefault()"
      >
        <component
          class="inner-widget"
          :is="item.name"
          @contextmenu.stop="canvasMenu(e, item.id)"
        />
      </dragger>
    </div>
    <div
      class="page-set"
      :class="{'page-set1': !btnItem.notebook}"
    >
      <!-- 右边信息栏 -->
      <SetPage
        v-if="setPage"
        :widthNum="widthNum"
        :heightNum="heightNum"
        @select="onPageSelect"
      />
      <SetGraph
        v-else
        :id="activeindex"
      />
    </div>
  </main>
  <Menu
    :position="menuPosition"
    :removeChartIndex="removeChartIndex"
  />
  <!-- 对齐线 纵向 -->
  <div
    v-if="verticalStandardLineVisible"
    :class="{
      'standard-line': true,
      'correct': isVerticalStandardLineCorrect,
    }"
    :style="`transform: translateX(-50%) translateX(${ verticalStandardLineX }px)`"
  />
</template>

<style scoped lang="scss">
.standard-line {
  height: 100%;
  width: 5px;
  background: rgba(255, 0, 0, 0.211);
  position: absolute;
  left: 200px;
}
.standard-line.correct {
  background: red;
}
.inner-widget {
  height: 100%;
  width: 100%;
}
.header {
  display: flex;
  align-items: center;
  background-color: rgb(29, 30, 31);
  padding: 8px 16px;
  position: relative;
  z-index: 9999;
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #ccc;
  }
}
main {
  display: flex;
  width: 100%;
  background-color: rgb(25, 28, 33);
  // 图层
  .layer {
    width: 200px;
    height: calc(100vh - 40px);
    overflow: hidden;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    transition: all .5s;
    background-color: rgb(25, 28, 33);
    z-index: 99999;
    &.layer1 {
      width: 0;
      min-width: 0;
    }
    // 图层头部
    .layer-header {
      color: #fff;
      background-color: rgb(46, 52, 60);
      font-size: 12px;
      height: 30px;
      width: 100%;
      padding-left: 16px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-width: 200px;
      span {
        display: flex;
        align-items: center;
        i {
          display: flex;
          align-items: center;
          margin-left: 4px;
          cursor: pointer;
        }
      }
    }
    // 操作
    .operation {
      background-color: rgb(32, 36, 42);
      padding: 0 18px;
      height: 30px;
      display: flex;
      align-items: center;
      color: rgb(78, 85, 93);
      i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin: 0 9px;
        &.active2 {
          color: #fff !important;
          cursor: pointer;
          background-color: rgb(40, 47, 58);
          &:hover {
            background-color: #2681ff;
          }
        }
      }
    }
    // 图层列表
    .layer-list {
      background-color: rgb(29, 33, 39);
      min-width: 200px;
      overflow: auto;
      flex: 1;
      .layer-list-item {
        box-sizing: border-box;
        width: 100%;
        height: 48px;
        padding: 0 2px 0 6px;
        display: flex;
        align-items: center;
        cursor: pointer;
        color: #fff;
        &.active {
          background-color: #2681ff;
          &:hover {
            background-color: #2681ff;
          }
        }
        &:hover {
          background-color: rgb(41, 53, 61);
        }
        .img-container {
          width: 53px;
          height: 34px;
          margin-right: 8px;
          min-width: 53px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .desc-title {
          box-sizing: border-box;
          flex: 1;
          min-width: 100px;
        }
        .layerStyle {
          padding: 0 2px 0 6px;
          height: 32px;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          span {
            margin-left: 6px;
          }
        }
      }
    }
    // 底部操作
    .filter-operation {
      height: 30px;
      padding: 0 18px;
      background-color: rgb(32, 36, 42);
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: calc(200px - 36px);
      span {
        margin-left: 8px;
        padding: 1.5px;
        &.active3 {
         cursor: pointer;
          &:hover {
            background-color: #2681ff;
          }
        }
      }
    }
  }
  // 资产
  .asset {
    width: 342px;
    height: 100%;
    box-sizing: border-box;
    min-width: 340px;
    transition: all .5s;
    overflow: hidden;
    background-color: rgb(25, 28, 33);
    z-index: 9999;
    &.asset1 {
      width: 0;
      min-width: 0;
    }
    .asset-header {
      font-size: 12px;
      color: #ccc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 30px;
      background-color: rgb(46, 52, 60);
      padding: 0 16px;
      span {
        &:first-child {
          min-width: 64px;
        }
        &:last-child {
          cursor: pointer;
        }
      }
    }
    .asset-main {
      display: flex;
      .asset-left {
        .asset-left-item {
          width: 48px;
          height: 64px;
          box-sizing: border-box;
          background-color: #14161a;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          flex-direction: column;
          color: #fff;
          font-size: 12px;
          &.active4 {
            border-left: 2px solid #2681ff;
            color: #2681ff;
          }
          span {
            &:first-child {
              font-size: 22px;
            }
          }
        }
      }
      .asset-center {
        flex: 1;
      }
    }
  }
  .canvas {
    flex: 1;
    min-width: 300px;
    position: relative;
    #screens {
      width: 100%;
      height: 100%;
    }
    .canvas-container {
      // width: 600px;
      // height: 400px;
      margin: 0 auto;
      position: absolute;
      top: 50px;
      left: 50px;
      // background-color: #0e2a43;
    }
    .chart-item {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      // transform-origin: 50%;
      &.left {
        left: 3000px !important;
      }
    }
  }
  .page-set {
    width: 332px;
    height: calc(100vh - 40px);
    min-width: 332px;
    overflow: hidden;
    transition: all .5s;
    z-index: 1111;
    background-color: #14161a;
    &.page-set1 {
      width: 0;
      min-width: 0;
    }
  }
}
.hide-text {
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient:vertical;
  word-break: break-all;
  line-break: anywhere;
}

  ::-webkit-scrollbar {
    width: 3px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #4B5563;
  }

  </style>
